<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器</title>
	<script src="../jquery/jquery-3.3.1.js"></script>
	<script>
		/**
		 * 利用Jquery来获取Jquery对象
		 * 1:按照id查找
		 *  let b = $('#b');
		 *
		 * 2:按照Tag查找
		 *  let ps = $('p');
		 *
		 * 3:按class查找
		 *  let a = $('.red.green');
		 *
		 * 3:按照属性查找
		 *  let pro = $('[name=email]')
		 *
		 * 4:组合查找
		 *  let comb = $('input[type=password]');
		 *
		 * 5:多项选择器
		 *  let multi = $('p.red,p.green');
		 */
	</script>
</head>
<body>
	<div id="test-jquery">
		<p id="para1" class="color-red" >JavaScript</p>
		<p id="para2" class="color-green">Haskell</p>
		<p class="color-red color-green">Erlang</p>
		<p name="name" class="color-black">Python</p>
		<form id="test-form" class="test-form" target="_blank" action="#" onsubmit="return false">
			<fieldset style="width: 300px;height: 200px">
				<legend>注册新用户</legend>
				<p><label>名字:<input name="name"></label></p>
				<p><label>邮件:<input name="email"></label></p>
				<p><label>口令:<input name="name" type="password"></label></p>
				<p><button type="submit">提交</button></p>
			</fieldset>
			<fieldset style="width: 300px;height: 200px">
				<legend>地址</legend>
				<p><label>省:<input name="province"></label></p>
				<p><label>市:<input name="city"></label></p>
				<p><label>街道:<input name="street" type="password"></label></p>
				<p><button type="submit">提交</button></p>
			</fieldset>
		</form>
	</div>
<script>
	//仅选择JavaScript
	let javaScript = $("#para1");
	console.log(javaScript.text());

	//Erlang
	let erlang = $(".color-red.c-green");
	console.log(erlang.text());

	//选择所有编程语言
	//属性选择器
	let allLang = $("[class^='color-']");
	console.log(allLang.text());

	//选择名字input
	let name = $("input[name=name]");
	console.log(name.text());

	//选择邮件和名字input
	let nameAndEmail = $("input[name=name],input[name=email]");
	console.log(nameAndEmail.text());
</script>
</body>
</html>